<template>
	<view class="enterprise-content">
		<view class="search-block">
			<input maxlength="20" @blur="inputChange" placeholder-class="inputPlaceholder" placeholder="请输入关键词" />
			<view class="iconfont icon-sousuo"></view>
		</view>
		<view class="list-block">
			<view @click="navigate(item.id)" v-for="(item,index) in enterprise" :key="item.id" class="enterprise-item">
				<image mode="aspectFill"
					:src="item.logoUrl?item.logoUrl:imageUrl+'/job_hunting/job_detail/enterprise.jpg'" class="photo">
				</image>
				<view class="info-block">
					<view class="name">{{item.enterpriseName}}</view>
					<view class="count">
						{{positionData&&positionData[item.id]?`已选${positionData[item.id].length}个岗位`:'暂无选择'}}</view>
				</view>
			</view>
		</view>
		<view class="create-btn" @click="onBack">确定</view>
	</view>
</template>

<script>
	import {
		getStorage
	} from '@/util/auth.js'
	import {
		getEnterpriseAll
	} from '@/api/live.js';
	export default {
		data() {
			return {
				positionData: null,
				enterprise: [],
				keyword: '',
				imageUrl: '',
			}
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			navigate(id) {
				uni.navigateTo({
					url: `/page_other/live/position?id=${id}`
				})
			},
			inputChange(e) {
				const value = e.detail.value;
				if (value != this.keyword) {
					this.keyword = value;
					this.getList();
				}
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterpriseAll({
					comName: this.keyword
				}).then((res) => {
					uni.hideLoading();
					this.enterprise = res ?? [];
				}).catch((res) => {
					uni.hideLoading();
					this.showToast('加载失败，请重试');
				})
			}
		},
		onShow() {
			const positionData = getStorage('positionData');
			if (positionData) {
				this.positionData = positionData;
			}
		},
		onLoad() {
			this.getList()
			this.imageUrl = this.globalConfig.imageUrl;
		}
	}
</script>

<style lang="scss" scoped>
	.enterprise-content {
		padding: 30rpx;

		.search-block {
			background: #f4f4f4;
			color: #999;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 20rpx;
			border-radius: 40rpx;
			height: 60rpx;
			margin-bottom: 30rpx;

			.iconfont {
				flex-grow: 0;
				font-size: 38rpx;
				font-weight: bold;
			}

			input {
				flex-grow: 1;
			}
		}

		.list-block {
			width: 100%;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;
			max-height: calc(100vh - 270rpx);

			.enterprise-item {
				background: #fafafa;
				border-radius: 10rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 30rpx;

				.photo {
					width: 100rpx;
					height: 100rpx;
					border-radius: 16rpx;
					background: #f0f0f0;
					margin-right: 20rpx;
				}

				.info-block {
					width: calc(100% - 120rpx);
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.count {
						font-size: 28rpx;
						color: #fe7725;
					}
				}
			}
		}

		.create-btn {
			position: fixed;
			transform: translate(-50%, -50%);
			bottom: 0;
			left: 50%;
			width: 400rpx;
			height: 80rpx;
			background: #0256FF;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40rpx;
		}
	}
</style>